<?php
require("view_header.php");
//1. 允许管理员进入该页面
$isAllowAccess = isset($_SESSION['administrator']);
// 2. 允许内部管理员进入该页面
$isAllowAccess |= isset($_SESSION['jgadmin']);

if (!$isAllowAccess ){
    echo "<a href='../loginpage.php'>Please Login First!</a>";
    exit(1);
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title> 用户列表 </title>
</head>
<body>
<div class="container col-sm-12" id="user_list">
    <!--删除用户提示框-->
    <zz-modal-component
            v-if="delDlg.isShow"
            modal-title='删除用户'
            modal-style='width:300px;'
            ok-btn="确认"
            cancel-btn="取消"
            @on-ok="okDelUser"
            @on-cancel="cancelDelUser">
        <div slot="modal-content">
            <p>是否确定删除【{{delDlg.userInfo.name}}】【ID:{{delDlg.userInfo.id}}】</p>
        </div>
    </zz-modal-component>

    <div class="col-sm-12">
        <center><h3>用户管理<a style="font-size: 14px;" href="user_mgr_school.php">合作学校用户管理 </a></center>

    </div>
    <div class="panel panel-default col-sm-12">
        <div class="panel-body">
        <form @submit.prevent="searchUser(true)" class="form-horizontal" >
            <div class="col-sm-12">
                <div class="form-group col-sm-3">
                    <input v-model="searchPara.keyword" class="form-control" placeholder="请输入用户名、姓名或学校" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <label class="col-sm-4">用户类型</label>
                    <div class="col-sm-8">
                        <select v-model="searchPara.type" class="form-control selectpicker">
                            <option value="-1" selected>不限</option>
                            <option value ="1">学生</option>
                            <option value ="2">老师</option>
                            <option value ="3">学生家长</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-sm-3">
                    <label class="col-sm-4">学员状态</label>
                    <div class="col-sm-8">
                        <select v-model="searchPara.status" class="form-control selectpicker">
                            <option value="-1" selected>不限</option>
                            <option value ="1">已试听</option>
                            <option value ="2">学习中</option>
                            <option value ="3">暂停中</option>
                            <option value ="4">已毕业</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-sm-3">
                    <label class="col-sm-4">内部人员</label>
                    <div class="col-sm-8">
                        <select v-model="searchPara.inzuozhu" class="form-control selectpicker">
                            <option value="-1" selected>不限</option>
                            <option value ="1">是</option>
                            <option value ="0">否</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-1" style="margin-left: -16px;">
                    <button @click="switchPage(0)" type="button" class="btn btn-primary" >首页</button>
                </div>
                <div class="col-sm-2">
                    <button @click="switchPage(-1)" type="button" class="btn btn-primary" >上一页</button>
                </div>
                <div class="col-sm-3">
                    <button @click="switchPage(1)" type="button" class="btn btn-primary" >下一页</button>
                </div>
                <div class="col-sm-offset-1 col-sm-2">
                    <button @click="editUser(null)" type="button" class="btn btn-primary" >添加用户</button>
                </div>

                <div class="col-sm-1">
                    <button type="submit" class="btn btn-primary" >查找</button>
                </div>
                <div class="col-sm-1">
                    <button @click="clearSearchPara()" type="reset" class="btn btn-primary" >清空</button>
                </div>
            </div>
        </form>
        </div>
        <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th v-if="!privileges.xxadmin">激活</th>
                    <th>用户类型</th>
                    <th v-if="!privileges.xxadmin">在机构</th>
                    <th v-if="!privileges.xxadmin">状态</th>
                    <th>学校</th>
                    <th>最近登录时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr	v-for="user in users">
                    <td><a :href="userInfoUrl(user.id)">{{user.id}}</a></td>
                    <td>{{user.name}}</td>
                    <td v-if="!privileges.xxadmin">
                        <a :href="availableChgUrl(user.id, )">
                            <span v-if="user.available" class=green>Available</span>
                            <span v-else class=red>Reserved</span>
                        </a>
                    </td>
                    <td>
                        <span v-if="user.type==1">学生</span>
                        <span v-else-if="user.type==2">老师</span>
                        <span v-else-if="user.type==3">家长</span>
                        <span v-else-if="user.type==2020">外部注册</span>
                        <span v-else>未知</span>
                    </td>
                    <td v-if="!privileges.xxadmin">
                        <span v-if="user.inzuozhu==1">是</span>
                        <span v-else-if="user.inzuozhu==0">否</span>
                    </td>
                    <td v-if="!privileges.xxadmin">
                        <span v-if="user.status==1" class="red">{{statusDesc(user.status)}}</span>
                        <span v-else-if="user.status==2" class="green">{{statusDesc(user.status)}}</span>
                        <span v-else>{{statusDesc(user.status)}}</span>
                    </td>
                    <td>{{user.school}}</td>
                    <td>{{user.accesstime}}</td>
                    <td>
                        <div v-if="user.can_op == 1">
                            <button v-on:click="editUser(user)">编辑</button>
                            &nbsp;<button v-on:click="delUser(user)">删除</button>
                        </div>
                    </td>
                </tr>
                </tbody>
        </table>
    </div>
    <div class="col-sm-3">
        总人数：{{total_cnt}}
    </div>
</div>

<script>
    let app = new Vue({
        el: "#user_list",
        data:{
            searchPara:{
                keyword: "",
                type: -1,
                inzuozhu: -1,
                status: -1,
            },
            pageId:0,  // 首页的pageId取值为0
            maxPageId:10, // 最大页码
            total_cnt:0,
            users: [],
            delDlg:{
                isShow:false,
                userInfo:{},
            },
            privileges:{},
        },
        mounted:function () {
            this.searchUser(true);
            this.checkPrivileges();
        },

        methods:{
            // 重置页面ID
            resetPageId:function () {
                this.pageId = 0;
                this.maxPageId = 10;
            },

            // 重置搜索参数
            clearSearchPara:function () {
                this.searchPara.keyword = "";
                this.searchPara.type = -1;
                this.searchPara.inzuozhu = -1;
                this.searchPara.status = -1;
            },

            // 查找用户
            searchUser:function(resetPageId) {
                if ( resetPageId ) {
                    this.resetPageId();
                }
                let reqData = this.searchPara;
                reqData.pageid = this.pageId;
                reqData.op = "search";
                let param = "para="+JSON.stringify(reqData);
                new Promise(function(resolve, reject) {
                    $.ajax({
                        type:'post',
                        url:'../model/user_router.php',
                        data:param,
                        dataType:'json',
                        success:function (retData) {
                            resolve(retData.dat);
                        }
                    });

                }).then(function(jsonData) {
                    // 注意：mounted 时,无法使用this
                    app.users = jsonData.user_list
                    app.maxPageId = jsonData.max_pageid
                    app.total_cnt = jsonData.total_cnt
                }).catch(function(err) {
                    console.log('出错：' + err);
                });
            },

            checkPrivileges:function () {
                let reqData = {};
                reqData.op = "check";
                reqData.privi_names = ['xxadmin', 'jgadmin'];
                let param = "para="+JSON.stringify(reqData);
                new Promise(function(resolve, reject) {
                    $.ajax({
                        type:'post',
                        url:'../model/user_router.php',
                        data:param,
                        dataType:'json',
                        success:function (retData) {
                            if ( retData.status ) {
                                resolve(retData.dat);
                            }
                            else {
                                reject(retData.msg);
                            }
                        }
                    });

                }).then(function(privileges) {
                    app.privileges = privileges;
                    // 校外管理人员只允许创建学生账号
                    if ( privileges.xxadmin ) {
                        app.userInfo.type = 1;
                        app.isShowGrade = true;
                    }

                }).catch(function(errMsg) {

                });
            },

            switchPage:function(op) {
                // 回到首页,首页的pageId的取值为0
                if ( op == 0 ) {
                    this.pageId = 0;
                }
                else {
                    this.pageId += op;
                }
                if ( this.pageId < 0 ) {
                    this.pageId = 0;
                }
                else if ( this.pageId > this.maxPageId ) {
                    this.pageId = this.maxPageId;
                }
                this.searchUser(false);
            },

            userInfoUrl:function(userId) {
                let url = "../../userinfo.php?user=";
                url += userId;
                return url;
            },
            availableChgUrl:function(userId, isAvail) {
                let url = "../user_df_change.php?cid=";
                url += userId;
                return url;
            },

            statusDesc:function(status) {
                if ( isNull(status) || status > 4 ) {
                    status = 0;
                }
                // 0, 1, 2, 3, 4
                let descArr=['未知', '已试听', '学习中', '暂停中', '已毕业'];
                return descArr[status];
            },

            // 编辑或者添加用户信息
            editUser:function(userInfo) {
                if ( ! isNull(userInfo) ) {
                    setCookie("userInfo", JSON.stringify(userInfo), 20);
                }
                window.location.href="user_post.php";
            },

            delUser:function (userInfo) {
                this.delDlg.userInfo = userInfo;
                this.delDlg.isShow = true;
            },
            okDelUser:function () {
                this.delDlg.isShow = false;
                // 发生删除用户请求
                let param = "para="+JSON.stringify({op:"del", userids:[this.delDlg.userInfo.id]});
                new Promise(function(resolve, reject) {
                    $.ajax({
                        type:'post',
                        url:'../model/user_router.php',
                        data:param,
                        dataType:'json',
                        success:function (retData) {
                            if ( retData.status ) {
                                resolve();
                            }
                            else {
                                reject(retData.msg);
                            }
                        }
                    });

                }).then(function() {
                    alert('删除用户成功');
                    app.searchUser(false);
                }).catch(function(errMsg) {
                    alert('删除用户失败: '+errMsg);
                });
            },
            cancelDelUser:function () {
                this.delDlg.isShow = false;
            },
        }
    });
</script>

</body>
</html>